<template>
  <div>
    <template v-if="isImportFile">
      <bread>
        <h1><span @click="isImportFile = false">校内核心期刊配置</span> <i class="el-icon-arrow-right"></i> 从文件导入</h1>
      </bread>
      <page-content isCard>
        <div class="upload">
          <i class="el-icon-upload icon"></i>
          <el-button type="primary" size="small">
            上传Excel
            <input type="file">
          </el-button>
          <el-select v-model="value" placeholder="请选择" size="small">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <p>请选择本批期刊的类别后<br>点击或将期刊名单文件拖拽到此处上传</p>
        </div>
      </page-content>
    </template>
    <template v-else>
      <bread class="filter">
        <h1>校内核心期刊配置</h1>
        <div class="filter-block">
          <search-box
            ref="searchBox"
            placeholder="搜索成果"
            :keyword="keyword"
            @search="getSearchWords"
            @clear="clearSearch"
            @active="hideFilter = true"
            @deactive="hideFilter = false">
          </search-box>
        </div>
        <div class="pull-right">
          <el-button size="small" type="primary" @click="settings">分类设置</el-button>
          <el-button size="small" type="success" @click="importFile">从文件导入</el-button>
        </div>
      </bread>
      <page-content is-card hasPagination>
        <el-tabs v-model="activeName">
          <el-tab-pane label="中文期刊" name="chinese">
            <el-table
              :data="tableData"
              stripe
              style="width: 100%"
              border
              header-row-class-name="custom-table-header">
              <el-table-column
                label="序号"
                type="index"
                width="100">
              </el-table-column>
              <template v-for="item in tableHead">
                <template v-if="item.en == 'd'">
                  <el-table-column
                    :label="item.cn"
                    :key="item.en"
                    :width="getColumnWidth(item)">
                    <template slot-scope="scope">
                      <el-dropdown
                        size="small"
                        trigger="click"
                        @command="changePosition">
                        <span class="el-dropdown-link">
                          <span class="main-text" :class="{danger: scope.row.approved == 0}">{{scope.row.d}}<i class="el-icon-caret-bottom el-icon--right"></i></span>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <template v-for="(item, index) in journals">
                            <el-dropdown-item v-if="item.val == '3'" divided>{{item.txt}}</el-dropdown-item>
                            <el-dropdown-item v-else>{{item.txt}}</el-dropdown-item>
                          </template>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </template>
                  </el-table-column>
                </template>
                <template v-else>
                  <el-table-column
                    :prop="item.en"
                    :label="item.cn"
                    :key="item.en"
                    :width="getColumnWidth(item)">
                  </el-table-column>
                </template>
              </template>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="英文期刊" name="english">

          </el-tab-pane>
        </el-tabs>
      </page-content>
      <pagination
        :total="total"
        :page-size="pageSize"
        @changePage="fetchData">
      </pagination>
    </template>

    <el-dialog title="校内核心期刊类别设置" :visible.sync="dialogSettingsisible" custom-class="setting-dialog">
      <div class="wrap">
        <template v-for="(journal, index) in journalsSetting">
          <el-row :gutter="20" :class="{editing: journal.editing}">
            <el-col :span="6">
              <div class="grid-content">
                <p>{{journal.title}}</p>
                <el-input v-model="journal.title" placeholder="请输入类别名称" size="small"></el-input>
              </div>
            </el-col>
            <el-col :span="14">
              <div class="grid-content">
                <p>{{journal.des}}</p>
                <el-input v-model="journal.des" placeholder="请输入备注" size="small"></el-input>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content">
                <el-button v-if="!journal.editing" type="text" class="error-text">删除</el-button>
                <el-button v-else type="text" class="error-text" @click="journal.editing = false">取消</el-button>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content">
                <el-button v-if="!journal.editing" type="text" @click="journal.editing = true">编辑</el-button>
                <el-button v-else type="text" @click="journal.editing = false">确认</el-button>
              </div>
            </el-col>
          </el-row>
        </template>
        <a href="#" @click.prevent="addType"> + 新增类别</a>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import SearchBox from 'components/SearchBox';
  import pagination from 'components/pagination';
  export default {
    data() {
      return {
        keyword: null,
        hideFilter: true,
        activeName: 'chinese',
        dialogSettingsisible: false,
        editing: false,
        isImportFile: false,
        journals: [
          {
            txt: '设为核心',
            val: '0'
          },
          {
            txt: '校内核心A',
            val: '1'
          },
          {
            txt: '校内核心B',
            val: '2'
          },
          {
            txt: '取消设为核心',
            val: '3'
          },
        ],
        tableHead: [
          {
            cn: '期刊名',
            en: 'a',
          },
          {
            cn: 'ISSN号',
            en: 'b',
          },
          {
            cn: '收录检索',
            en: 'c',
          },
          {
            cn: '校内级别',
            en: 'd',
          }
        ],
        tableData: [
          {
            a: '期刊名称期刊名称期刊名称期刊名称期刊名称',
            b: '1111-9999',
            c: 'scie',
            d: '校内核心A',
          },
          {
            a: '期刊名称',
            b: '1111-9999',
            c: '自然指数杂志',
            d: '校内核心B',
          },
        ],
        total: 1000,
        pageSize: 30,
        journalsSetting: [
          {
            title: '校内核心A',
            des: '学校认为重要的期刊',
            editing: false,
          },
          {
            title: '校内核心B',
            des: '学校认为重要的期刊，所以我们也设为很重要的期刊',
            editing: false,
          },
        ],
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
      }
    },
    methods: {
      getSearchWords() {

      },
      clearSearch() {

      },
      getColumnWidth() {

      },
      fetchData() {

      },
      changePosition() {

      },
      settings() {
        this.dialogSettingsisible = true;
      },
      reset() {
        this.dialogSettingsisible = false;
      },
      confirm() {
        this.dialogSettingsisible = false;
      },
      changeStatus(data) {
        data.editing = true;
      },
      addType() {
        this.journalsSetting.push({
          title: '',
          des: '',
          editing: true,
        });
      },
      importFile() {
        this.isImportFile = true;
      }
    },
    components: {
      SearchBox,
      pagination
    }
  }
</script>
<style scoped lang="scss">
  .setting-dialog {
    .wrap {
      border: 1px solid #EBEEF5;
      padding: 20px;
      a {
        text-decoration: none;
        margin-top: 20px;
        display: block;
      }
    }
  }
  .el-row {
    .grid-content {
      .el-input {
        display: none;
      }
      p {
        display: block;
        line-height: 32px;
      }
      .el-button {
        padding: 8px 0;
      }
    }
    &.editing {
      .grid-content {
        p {
            display: none;
          }
        .el-input {
          display: block;
        }
      }
    }
  }
  .upload {
    text-align: center;
    margin-top: 20%;
    .icon {
      font-size: 70px;
      color: var(--main-color);
      display: block;
    }
    .el-button {
      position: relative;
      margin: 20px auto;
      display: block;
    }
    input[type=file] {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
    }
    p {
      margin-top: 10px;
      color: #909399;
    }
  }
</style>
